<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../libs/mui/mui.css"/>
		<link rel="stylesheet" href="../css/mui.min.css"/>
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
		<style>
			/*轮播图*/	
			.mui-bar-nav{box-shadow: none;}
			/*.mui-slider .mui-slider-group .mui-slider-item img{height: 200px;overflow: hidden;}*/
			.mui-slider-indicator{text-align: right;width: 95%;}
			.mui-slider-indicator .mui-indicator{width: 10px;height: 10px;margin: 1px 2px;box-shadow: none;background: #e7e7e7;}
			.mui-slider-indicator .mui-active.mui-indicator {background: #338efc; box-shadow:none;}			
			/*详情*/
			.prize .mui-table-view:after,.prize .mui-table-view:before{height: 0;}
			.prize .mui-table-view:nth-child(2) .mui-table-view-cell{padding: 11px 15px;width: 50%;}
			.prize .mui-table-view:nth-child(2) .mui-table-view-cell p{margin-top: 4px;}
			.detail p{padding: 5px 0;}
			.detal img{margin-bottom: -5px;}
			.detail .mui-table-view:nth-child(2):after{height: 0;}					
			/*底部*/
			.mui-bar-tab .mui-tab-item.mui-active{color: #e3393c !important;}			
			.mui-bar-tab div a:nth-child(1){display: block;text-align: center;line-height: 30px;height: 50px;background: white;border-right: 1px solid #DDDDDD}
			.mui-bar-tab div a:nth-child(1) h5{margin: 0;}
			.mui-bar-tab div:nth-child(2){background: white;color: #2875f5;line-height: 30px;}
			.mui-bar-tab div:nth-child(3) span{background: #2875f5;color: white;line-height: 30px;}
			.wid30{font-size: 17px;width: 100%;display: inline-block;padding: 12px 0;text-align: center;height: 50px;}							
		  	/*商品*/		  	
			.mui-table-view.mui-grid-view .mui-table-view-cell {width: 100%;text-align: left;padding: 11px 15px;}
			.detal{width: 100%;padding: 11px 0px;background: white;overflow: hidden;}
			.detal h5{color: black;font-size: 16px;padding: 0px 15px;}
			.shop{display: block;font-size: 14px;color: #AAAAAA;padding: 13px 15px;}
			.shop span{width: 50%;float: left;display: block;}
			/*弹窗*/
			/*.alert{ display:none;position: fixed;right: 0;left: 0; bottom: 0;height: auto !important;z-index: 1000; }
			.alert-box{ background-color: #ffffff !important;bottom: 0 !important; right: 0;left: 0; z-index: 10000;padding-top:5em; height: auto !important;width: 100%;}
			.alert img{height: 95px; max-width: 95px; line-height: 95px; position: absolute; top:13px; left:15px;z-index: 99999;border: 3px solid #ffffff;border-radius: 4px;}
			.alert .text{position: absolute;left: 120px;top: 40px;z-index: 99999;}
			.alert .text p{margin: 0; padding: 0; color: black;}
			.chose>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}			
			.colo>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}
			.back-orange {background: #34b0f1 !important;}
			.mui-numbox{width: 150px;}
			.sure1.mui-btn,.sure2.mui-btn{background-color: #34b0f1; border: none;color: #ffffff; padding:9px 12px !important; margin: 0;display: none;}	
		  	.alert-back{position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.5);display:none;}		  						*/
			/*弹窗*/
			.alert{ display:none;position: fixed;right: 0;left: 0; bottom: 0;height: 480px;z-index: 1000; }
			.alert-box{background-color: #ffffff !important;}
			.alert-box{ position:absolute; bottom: 0 !important; right: 0;left: 0; z-index: 10000;padding-top:5em; height: 450px;}
			.alert img{height: 95px; max-width: 95px; line-height: 95px; position: absolute; top:13px; left:15px;z-index: 99999;border: 3px solid #ffffff;border-radius: 4px;}
			.alert .text{position: absolute;left: 120px;top: 40px;z-index: 99999;}
			.alert .text p{margin: 0; padding: 0; color: black;}
			.chose>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}
			.colo>button{background-color: #cbcbcb; border: none; color: #ffffff;margin-right: 5px;}
			.back-orange {background: #34b0f1 !important;}
			.mui-numbox{width: 150px;}
			.sure1.mui-btn,.sure2.mui-btn{background-color: #34b0f1; border: none;color: #ffffff; padding:9px 12px !important; margin: 0;display: none;position: absolute;bottom: 0;}	
			.alert-back{position: fixed;z-index: 998;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.5);display:none;}
			
			.a{border: 1px #ccc solid;}
			.picture{z-index: 99999;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
			<a href="#picture" class="mui-pull-right mui-icon">
		    	<i class="iconfont Siez1">&#xe612;</i>
		    </a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<div class="mui-col-xs-3 mui-pull-left">
				<a class="tel">
					<i class="iconfont Siez2">&#xe611;</i>
					<h5>客服</h5>
				</a>
			</div>
			<div class="mui-col-xs-4 mui-pull-left gouwu">
				<span class="wid30 shoucang">加入购物车</span>
			</div>
			<div  class="mui-col-xs-5 mui-pull-left">
				<a class="goumai">
					<span class="wid30">立即购买</span>
				</a>
			</div>
		</nav>	
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../public/img/pic_img.jpg" data-preview-src="" data-preview-group="1"/>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/pic_img.jpg" data-preview-src="" data-preview-group="1"/>
						</a>
					</div>					
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/pic_img.jpg" data-preview-src="" data-preview-group="1"/>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../public/img/pic_img.jpg" data-preview-src="" data-preview-group="1"/>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../public/img/pic_img.jpg" data-preview-src="" data-preview-group="1"/>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="prize">					
				<ul class="mui-table-view" >
					<li class="mui-table-view-cell">						
						<div class="mui-ellipsis-2"></div>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view" style="padding-bottom: 0;">
					<li class="mui-table-view-cell" >
						<span class="red">
							<span class="mui-h4"></span>
						</span>						
					</li>					
				</ul>
			</div>	
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" onclick="goods_evaluation()">
					<a class="mui-navigate-right">
						<span class="evaluate"></span>
					</a>
				</li>					
			</ul>
			<div class="detal">
				<h5>商品详情</h5>
				<div class="shop">
					<!--<span>品牌：Apple/苹果</span>
					<span>产品名称：iPhone 6</span>					
				</div>
				<div class="shop">
					<span>操作系统：iOS 9</span>
					<span>上市时间：2016年9月</span>-->
				</div>				
				<!--<img src="../public/img/13.jpg" />-->
			</div>			
		</div>	
		<div class="alert">
			<div style="height: auto !important;display: inline-block;">
				<img class="mui-media-object mui-pull-left" src="../public/img/pic_img.jpg">
				<div class="text">
					<b class="red">￥<span class="price"></span></b>
					<p>库存：<span class="storage"></span></p>
					<p>已选：<span class="selected"></span></p>
				</div>
			</div>
			<div class="alert-box">
				<div class="mui-table-view">
					<div class="mui-table-view-cell spec_value">
						<!--<div>
							<span>储存容量</span>
							<p class="chose m5">
								<button type="button" class="mui-btn back-orange">32GB</button>
								<button type="button" class="mui-btn mlr">64G</button>
								<button type="button" class="mui-btn mlr">128G</button>
							</p>
						</div>
						<div class="m1">
							<span>颜色</span>
							<p class="colo m5">
								<button type="button" class="mui-btn back-orange">黑色</button>
								<button type="button" class="mui-btn mlr">金色</button>
							</p>
						</div>
						<div class="m1">
							<span>颜色</span>
							<p class="colo m5">
								<button type="button" class="mui-btn back-orange">黑色</button>
								<button type="button" class="mui-btn mlr">金色</button>
							</p>
						</div>-->
					</div>	
				</div>
				<div class="mui-table-view">
					<div class="mui-table-view-cell mui-text-right">
						<span class="mui-pull-left" style="padding-top: 8px">购买数量</span>
						<div class="mui-numbox" data-numbox-min='1'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox quantity" type="number" />
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</div>
				</div>
				<div style="background-color: #ffffff;height: 50px;"></div>
				<div>
					<button class="mui-btn mui-btn-block sure1 goods_id" data-goods_id="" data-store_id="">
						确定
					</button>	
					<button class="mui-btn mui-btn-block sure2 goods_id" data-goods_id="" data-store_id="">
						确定
					</button>
				</div>
			</div> 
		</div>
		<!--分享-->
		<div id="picture" class="brand-share mui-popover mui-popover-action mui-popover-bottom" style="bottom: 50px;">
			<ul class="background table-view">
				<li><i class="iconfont lvs weixin">&#xe609;</i>
					<span>微信</span>
				</li>
				<li><i class="iconfont ify4 qq">&#xe658;</i>
					<span>QQ好友</span>
				</li>
				<li><i class="iconfont lvs friends">&#xe65f;</i>
					<span>朋友圈</span>
				</li>
				<li><i class="iconfont ify3 micro-blog">&#xe661;</i>
					<span>微博</span>
				</li>
			</ul>		
		</div> 
		<div class="alert-back a"></div>
		<script src="../js/mui.js"></script>
		<!--<script src="../js/mui.min.js"></script>-->
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/web_js/public.js"></script>
		<script src="../js/web_js/goods_details.js"></script>
		<script src="../js/web_js/share.js"></script>
		<script type="text/javascript"> 
			mui.previewImage();
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			//nav自动时间控制
			gallery = mui('#slider');
				gallery.slider({
					interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
			});	
			
			var width = $(window).innerWidth();	
			$('.mui-slider-item img').css('hieght',width);
			$('.mui-slider-item').css('hieght',width);
			
			$(".gouwu").on("tap",function(){
				$(".alert-back").toggle();
				$(".alert").slideToggle();
				$('.sure2').css("display",'none')
				$(".sure1").css('display','block');
				var sids = selected = '';
				$('.back-orange').each(function(){
					selected += $(this).text() + ",";
					sids += $(this).attr('data-id') + ",";
			    });
			    $('.selected').text(selected);
			    return false;
			})
			$(".sure1").on("tap",function(){
				var storage = $('.storage').text();
				if(parseInt(storage) <= 0){
					toast('库存不足！请换一个分类！');return;
				}
				$(".alert").slideToggle();
				$(".alert-back").toggle();
				var _this = $(this);
				var goods_id = _this.attr('data-goods_id');
			    var quantity = $('.quantity').val();
			    $.ajax({ 
			    	type:"get",
			    	url:apiRoot + "?act=goods&op=add&goods_id="+goods_id+'&quantity='+quantity+'&member_id='+member_id,
			    	dataType:'json',
			    	success:function(info){
			    		console.log(JSON.stringify(info));
			    		if(info ==  true){
			    			toast('该物品已存在购物车！');
			    		}else if(info > 0){
			    			toast('加入购物车成功！');
			    		}else{
			    			toast('加入购物车失败！');
			    		}
			    	},
			    	error:function(e){
			    		
			    		toast('操作失败！');
			    	}
			    });
			})	
			$(".goumai").on("tap",function(){
				$(".alert-back").toggle();
				$(".alert").slideToggle();
				$('.sure1').css("display",'none')
				$(".sure2").css('display','block');
				var sids = selected = '';
				$('.back-orange').each(function(){
					selected += $(this).text() + ",";
					sids += $(this).attr('data-id') + ",";
			    });
			    $('.selected').text(selected);
			    return false;
			})
			$(".sure2").on("tap",function(){
				$(".alert").slideToggle();
				$(".alert-back").toggle();
				var _this = $(this);
				var goods_id = _this.attr('data-goods_id');
				var store_id = _this.attr('data-store_id');
				var quantity = $('.quantity').val();
				
				if(!goods_id || !quantity){
					toast('缺少参数！');return;
				}
				var storage = $('.storage').text();
				if(parseInt(storage) <= 0){
					toast('库存不足！请换一个分类！');return;
				}
				var shuju = goods_id+'|'+quantity;
				var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
				var webviewContent= plus.webview.create('./goods.html','goods.html',{},{shuju:shuju,store_id:store_id,payment_type:'online',ifcart:0});//后台创建webview并打开show.html
				webviewContent.addEventListener("loaded", function() { //注册新webview的载入完成事件
			        nwaiting.close(); //新webview的载入完毕后关闭等待框
			        webviewContent.show("slide-in-right",20); //把新webview窗体显示出来，显示动画效果为速度200毫秒的右侧移入动画
				}, false);
//				openNewPage('goods.html')
			})
//			
	        
	        
		</script>
	</body>
</html>